<template>
  <Card title="水质微生物指标（内部信息）">
    <template #content>
      <div class="content" ref="chartContainer"></div>
    </template>
  </Card>
</template>
<script setup>
defineOptions({
  name: "RightCard3",
  inheritAttrs: false,
});
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});

import { getCurrentInstance, onMounted, ref } from "vue";
const { proxy } = getCurrentInstance();

const chartContainer = ref(null);
const colorList = ["#2B76E0", "#1BB06B", "#C4AD21", "#26C0C5"];

function initEchart() {
  const chart = proxy.echarts.init(chartContainer.value);
  let data = props.data.monthGroupList;
  let XData = [
    "1月",
    "2月",
    "3月",
    "4月",
    "5月",
    "6月",
    "7月",
    "8月",
    "9月",
    "10月",
    "11月",
    "12月",
  ];
  let valueData = Object.values(INTERNAL_DICT).map((item, index) => ({
    name: item,
    data: data.map((item) => item[`type${[index + 1]}`]),
  }));
  let option = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      y: "top",
      icon: "rectangle",
      itemHeight: 4, // 图例图形高度
      data: valueData.map((item) => item.name),
    },
    grid: {
      top: "middle",
      left: "3%",
      right: "4%",
      bottom: "3%",
      height: "60%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: XData,
      axisLine: {
        lineStyle: {
          color: "rgba(193, 207, 220, 1)",
        },
      },
      axisLabel: {
        interval: 0, //横轴信息全部显示
        rotate: 40, //40度角倾斜显示
        textStyle: {
          color: "rgba(0, 0, 0, 1)",
        },
      },
    },
    yAxis: [
      {
        name: "单位(mm)",
        type: "value",
        axisLabel: {
          textStyle: {
            color: "rgba(0, 0, 0, 1)",
          },
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#cdd5e2",
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(193, 207, 220, 1)",
          },
        },
      },
    ],
    series: valueData.map((item, index) => {
      let obj = {
        type: "line",
        symbolSize: 5, //标记的大小
        showSymbol: false, //鼠标滑过显示拐点
        lineStyle: {
          normal: {
            width: 2,
            color: colorList[index],
            shadowColor: "rgba(22, 161, 250, 0.5)",
            shadowBlur: 10,
            shadowOffsetY: 7,
          },
        },
        itemStyle: {
          normal: {
            color: colorList[index],
          },
        },
        smooth: true,
      };
      Object.assign(item, obj);
      return item;
    }),
    // series: [
    //   {
    //     name: "水文1",
    //     type: "line",
    //     data: valueData.data1,
    //     symbolSize: 9, //标记的大小
    //     lineStyle: {
    //       normal: {
    //         width: 2,
    //         color: "#16A1FA",
    //         shadowColor: "rgba(22, 161, 250, 0.5)",
    //         shadowBlur: 10,
    //         shadowOffsetY: 7,
    //       },
    //     },
    //     itemStyle: {
    //       normal: {
    //         color: "rgba(22, 161, 250, 1)",
    //       },
    //     },
    //     smooth: true,
    //   },
    //   {
    //     name: "水文2",
    //     type: "line",
    //     data: valueData.data2,
    //     symbolSize: 9, //标记的大小
    //     lineStyle: {
    //       normal: {
    //         width: 2,
    //         color: "#7AE285",
    //         shadowColor: "rgba(122, 226, 133, 0.5)",
    //         shadowBlur: 10,
    //         shadowOffsetY: 7,
    //       },
    //     },
    //     itemStyle: {
    //       normal: {
    //         color: "rgba(122, 226, 133, 1)",
    //       },
    //     },
    //     smooth: true,
    //   },
    // ],
  };
  chart.setOption(option);
  // 为窗口的resize事件绑定处理函数
  window.onresize = function () {
    // 让图表的宽高自适应容器的大小
    chart.resize();
  };
}

onMounted(() => {
  initEchart();
});
</script>
<style lang="scss" scoped>
.content {
  height: 100%;
}
</style>
